<template>
<div id="box">
  <!--面包屑区域-->
  <el-breadcrumb>
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>商品管理</el-breadcrumb-item>
  <el-breadcrumb-item>商品分类</el-breadcrumb-item>
</el-breadcrumb>
<!--卡片视图区域-->
<el-card>
    <!--添加分类按钮区域-->
    <el-row>
        <el-col>
            <el-button type="primary" @click="showCateVisible()">添加分类</el-button>
        </el-col>
    </el-row>
    <!--表格区域-->
    <tree-table class="treeTable" :data="catelist" :columns="columns" :selection-type="false" :expand-type="false" :show-index="true" index-text="#" border>
    <template slot="isok" slot-scope="scope">
        <i class="el-icon-success" v-if="scope.row.cat_deleted  ==  false" style="color: lightgreen"></i>
        <i class="el-icon-error" v-else style="color: red"></i>
    </template>
    <template slot="isok1" slot-scope="scope" >
        <el-tag size="mini" v-if="scope.row.cat_level===0">一级</el-tag>
        <el-tag type="success" size="mini" v-else-if="scope.row.cat_level===1">二级</el-tag>
        <el-tag type="warning" size="mini" v-else>三级</el-tag>
        </template>
        <template slot="isok2" slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="editshowCateVisible(scope.row.cat_id)">编辑</el-button>
            <el-button type="primary" icon="el-icon-delete" size="mini" @click="deleteCate(scope.row.cat_id)">删除</el-button>
            </template>
    </tree-table>
    <!--分页区域-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="queryinfo.pagenum"
      :page-sizes="[1, 3, 5, 7]"
      :page-size="queryinfo.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
</el-card>
<!--添加对话框-->
<el-dialog
  title="添加分类"
  :visible.sync="addVisible"
  width="50%"
  @close="closeadd"
 >
 <el-form :model="addCateForm" :rules="addCaterules" ref="addruleForm" label-width="100px" >
  <el-form-item label="分类名称:" prop="cat_name">
    <el-input v-model="addCateForm.cat_name"></el-input>
  </el-form-item>
  <el-form-item label="父级分类:" >
    <el-cascader
    v-model="selectKeys"
    :options="parentCateList"
    :props="{ expandTrigger: 'hover',label: 'cat_name',value: 'cat_id',children: 'children'}"
    @change="handleChange" clearable change-on-select></el-cascader>
  </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="addVisible = false">取 消</el-button>
    <el-button type="primary" @click="addCate">确 定</el-button>
  </span>
</el-dialog>
<!--编辑对话框-->
<el-dialog
  title="编辑"
  :visible.sync="editVisible"
  width="50%"
  @close="closeedit"
 >
 <el-form :model="editCateForm" :rules="addCaterules" ref="editruleForm" label-width="100px" >
  <el-form-item label="分类名称:" prop="cat_name">
    <el-input v-model="editCateForm.cat_name"></el-input>
  </el-form-item>
  
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="editVisible = false">取 消</el-button>
    <el-button type="primary" @click="editCate">确 定</el-button>
  </span>
</el-dialog>
</div>
</template>

<script>
export default {
    data() {
        return {
            //商品分类数据列表
            catelist: [],
            queryinfo: {
                type: 3,
                pagenum: 1,
                pagesize: 5
            },
            total: 0,
            //表格定义
            columns: [
                {
                    label: "分类名称",
                    prop: 'cat_name'
                },
                {
                    label: "是否有效",
                    type: "template",
                    template: "isok"
                },
                {
                   label: "排序",
                   type: "template",
                   template: "isok1" 
                },
                {
                    label: "操作",
                    type: "template",
                    template: "isok2"
                }
            ],
            //父级分类数据
            parentCateList:[],
            //选中的父级分类id
            selectKeys: [],
            //对话框的显示与隐藏
            addVisible: false,
            editVisible:false,
            //用id查出的数据
            editCateForm: {},
            //添加分类表单数据
            addCateForm: {
                cat_name:'',
                //分类的父id
                cat_pid: 0,
                //默认一级
                cat_level: 0
            },
            //验证规则
            addCaterules: {
                cat_name:[{required: true,message: "请输入分类名称",trigger: 'blur'}]
                        }
        }
    },
    created() {
        this.getCateList()
    },
    methods: {
        //获取商品分类数据
        async getCateList() {
            let { data } = await this.$http.get("categories", { params: this.queryinfo })
            // console.log(data)
            if (data.meta.status !== 200) return this.$message.error("获取分类数据失败")
            this.catelist = data.data.result
            this.total = data.data.total
        },
        //监听pagesize事件
        handleSizeChange(news){
            // console.log(news)
           this.queryinfo.pagesize=news
            this.getCateList()
        },
        //监听pagenum事件
        handleCurrentChange(news){
            // console.log(news)
            this.queryinfo.pagenum=news
            this.getCateList()
        },
        //点击添加分类
        showCateVisible(){
            this.getParentCateList()
     this.addVisible=true
        },
        //获取父级分类数据
      async  getParentCateList(){
          let {data}=await this.$http.get("categories",{params: {type: 2}})
          if(data.meta.status!==200) return this.$message.error("获取父类数据失败")
        //   console.log(data)
        this.parentCateList=data.data
        },
        //多级选择器改变触发
        handleChange(){
           if(this.selectKeys.length>0){
            this.addCateForm.cat_pid=this.selectKeys[this.selectKeys.length-1]
            this.addCateForm.cat_level=this.selectKeys.length
            return 
           }else{
            this.addCateForm.cat_pid=0
            this.addCateForm.cat_level=0
           }
           
        },
    
        //点击确定，添加分类
        addCate(){
           this.$refs.addruleForm.validate(async (bool)=>{
            if(!bool) return 
            let {data}=await this.$http.post("categories", this.addCateForm)
            // console.log(data)
            if(data.meta.status!==201) return this.$message.error("分类添加失败")
            this.$message.success("分类添加成功")
            this.addVisible=false
            this.getCateList()
           })
        },
        //关闭对话框
        closeadd(){
            this.$refs.addruleForm.resetFields()
            this.selectKeys=[]
            this.addCateForm.cat_pid=0
            this.addCateForm.cat_level=0
        },
        //点击编辑
        async editshowCateVisible(id){
            let {data}=await this.$http.get("categories/"+id)
         if(data.meta.status!==200) return this.$message.error("id用户获取失败")
         this.editCateForm=data.data
         this.editVisible=true
        },
        //关闭对话框
    closeedit(){
        this.$refs.editruleForm.resetFields()
    },
    //点击确定，进行编辑
     editCate(){
        this.$refs.editruleForm.validate(async (bool)=>{
            if(!bool) return
            let {data}=await this.$http.put("categories/"+this.editCateForm.cat_id,{cat_name: this.editCateForm.cat_name})
            // console.log(data)
            if(data.meta.status!==200) return this.$message.error("分类编辑失败")
            this.$message.success("分类编辑成功")
            this.editVisible=false
            this.getCateList()
        })
     },
     //点击删除，进行删除
    async deleteCate(id){
        let h=await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err=>err)
        if(h!=='confirm') return this.$message.info("已取消删除")
        let {data} =await this.$http.delete("categories/"+id)
        if(data.meta.status!==200) return this.$message.error("删除失败")
        this.$message.success("删除成功")
        this.getCateList()
     }
    }
} 
</script>

<style lang="less" scoped>
.treeTable{
    margin-top: 15px;
}
.el-cascader{
    width: 100%
}
</style>